import React, { ReactNode } from 'react'
import logo from '../../assets/logo.svg'
import { GlobalOutlined } from '@ant-design/icons'
import { Layout, Typography, Input, Menu, Button, Dropdown } from 'antd'
import styles from './Header.module.css'
import { withRouter, RouteComponentProps } from '../../helpers/withRouter'
import { withTranslation, WithTranslation } from 'react-i18next'
import RootStore, { RootState } from '../../redux/store'
// import { LanguageState } from '../../redux/language/languageReducer'
import {
  changeLanguageActionCreator,
  addLanguageActionCreator
} from '../../redux/language/languageActions'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
type PropsType = RouteComponentProps &
  WithTranslation &
  ReturnType<typeof mapStateProps> &
  ReturnType<typeof mapDispatchProps>
// interface State extends LanguageState { }
class HeaderComponent extends React.Component<PropsType> {
  constructor(props) {
    super(props)
    this.menuClickHandler = this.menuClickHandler.bind(this)
  }
  handlerStateChange = () => {
    const storeState = RootStore.store.getState()
    this.setState({
      language: storeState.language.language,
      languageList: storeState.language.languageList
    })
  }
  menuClickHandler(e) {
    const { changeLanguage, addLanguage } = this.props
    if (e.key === 'new') {
      addLanguage('新语言', 'new_language')
    } else {
      changeLanguage(e.key)
    }
  }
  render(): ReactNode {
    const { navigate, t, language, languageList } = this.props
    return (
      <div className={styles['app-header']}>
        <div className={styles['top-header']}>
          <div className={styles.inner}>
            <Typography.Text>{t('header.slogan')}</Typography.Text>
            <Dropdown.Button
              style={{ marginLeft: 15, display: 'inline-block' }}
              overlay={
                <Menu
                  onClick={this.menuClickHandler}
                  items={[
                    ...languageList.map((l) => {
                      return { key: l.code, label: l.name }
                    }),
                    { key: 'new', label: t('header.add_new_language') }
                  ]}
                />
              }
              icon={<GlobalOutlined />}
            >
              {languageList.find((l) => l.code === language)?.name}
            </Dropdown.Button>
            <Button.Group className={styles['button-group']}>
              <Button
                onClick={() => {
                  navigate('/register')
                }}
              >
                {t('header.register')}
              </Button>
              <Button
                onClick={() => {
                  navigate('/login')
                }}
              >
                {t('header.signin')}
              </Button>
            </Button.Group>
          </div>
        </div>
        <Layout.Header className={styles['main-header']}>
          <img src={logo} alt="logo" className={styles['App-logo']} />
          <span
            onClick={() => {
              navigate('/')
            }}
          >
            <Typography.Title className={styles.title} level={3}>
              {t('header.title')}
            </Typography.Title>
          </span>
          <Input.Search
            className={styles['search-input']}
            placeholder={t('header.search')}
          />
        </Layout.Header>
        <Menu
          className={styles['main-menu']}
          mode="horizontal"
          items={[
            { key: '1', label: t('header.home_page') },
            { key: '2', label: t('header.weekend') },
            { key: '3', label: t('header.group') },
            { key: '4', label: t('header.backpack') },
            { key: '5', label: t('header.private') },
            { key: '6', label: t('header.cruise') },
            { key: '7', label: t('header.hotel') },
            { key: '8', label: t('header.local') },
            { key: '9', label: t('header.theme') },
            { key: '10', label: t('header.custom') },
            { key: '11', label: t('header.study') },
            { key: '12', label: t('header.visa') },
            { key: '13', label: t('header.enterprise') },
            { key: '14', label: t('header.high_end') },
            { key: '15', label: t('header.outdoor') },
            { key: '16', label: t('header.insurance') }
          ]}
        ></Menu>
      </div>
    )
  }
}
// const dispatchEvent = () => { }
const mapStateProps = (state: RootState) => {
  return {
    language: state.language.language,
    languageList: state.language.languageList
  }
}
const mapDispatchProps = (dispatch: Dispatch) => {
  return {
    changeLanguage: (language: string) => {
      const action = changeLanguageActionCreator(language)
      dispatch(action)
    },
    addLanguage: (name: string, code: string) => {
      const action = addLanguageActionCreator(name, code)
      dispatch(action)
    }
  }
}
export const Header = connect(
  mapStateProps,
  mapDispatchProps
)(withTranslation()(withRouter(HeaderComponent)))
